<template>
  <div class="special-approval">
    <Title title="特批信息">
      <slot />
    </Title>
    <div style="padding: 0 6px;">
      <div class="oa-number">
        <span>OA申请编号：</span>
        <span>{{ specialInfo.specialOaNo }}</span>
      </div>
      <div class="appendix">附件：</div>
      <el-row>
        <el-col
          v-for="(item, index) in specialInfo.specialAttachmentList"
          :key="index"
          :span="24"
          class="appendix-item"
        >
          <el-button type="text" @click="previewHandle(item.attachmentUrl,item.filename)">{{ item.filename }}</el-button>
        </el-col>
      </el-row>
    </div>
    <BlockDialog v-if="curUrl" :url="curUrl" title="预览" :name="curName" @close="closeHandle" />
  </div>
</template>

<script>
import Title from '@/components/Title'

export default {
  name: 'SpecialApproval',
  components: {
    Title
  },
  props: {
    specialInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      curUrl: '',
      curName: ''
    }
  },
  methods: {
    closeHandle() {
      this.curUrl = ''
      this.curName = ''
    },
    previewHandle(curUrl, curName) {
      window.open(curUrl)
      this.curUrl = curUrl
      this.curName = curName
    }
  }
}
</script>

<style lang="scss" scoped>
.special-approval {
  font-size: 14px;
  header {
    padding: 6px;
    font-weight: bold;
    background: #eee;
  }
  .oa-number {
    margin-top: 25px;
    margin-bottom: 25px
  }
  .appendix {
    margin-bottom: 10px
  }
  .appendix-item {
    margin-bottom: 10px;
  }
}
</style>
